<template>
  <div>
 <br>
    <div>
        <el-input v-model="title" placeholder="公告标题" style="width:280px"></el-input>
        <el-input v-model="text" placeholder="公告内容" style="width:280px"></el-input>
        <el-button type="primary" @click="findname()">查询</el-button>
    </div>
    <br>
    <div>
        <el-button type="primary" @click="dialogVisible = true">添加</el-button>
        <el-button type="danger" plain @click="deleteAll">批量删除</el-button>
    </div>
    <br>

    <template>
        <el-table
                :data="tableData"
                border
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="cmsType.typeName"
                    label="公告类型"
                    width="180"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="contentTitle"
                    label="公告标题"
                    width="180"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="contentText"
                    label="公告内容"
                    width="180"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="createBy"
                    label="作者"
                    width="180"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="创建时间"
                    width="180"
                    align="center">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="dialogVisible1 = true,handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <div class="block">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[2,3,4]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
    <!--添加弹出框-->
    <el-dialog
            title="添加公告"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">

        <el-form ref="cmsContent" :model="cmsContent" label-width="80px">
            公告类型 &nbsp;&nbsp;&nbsp;&nbsp;<el-select v-model="cmsContent.typeId" placeholder="请选择">
                <el-option
                  v-for="item in types"
                  :key="item.typeId"
                  :label="item.typeName"
                  :value="item.typeId">
                </el-option>
            </el-select>
            <el-form-item label="公告标题">
                <el-input v-model="cmsContent.contentTitle"></el-input>
            </el-form-item>
            <el-form-item label="公告内容">
                <el-input v-model="cmsContent.contentText"></el-input>
            </el-form-item>
            <el-form-item label="创建者">
                <el-input v-model="cmsContent.createBy"></el-input>
            </el-form-item>
            <el-form-item label="创建时间">
                <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="cmsContent.createTime" type="datetime"></el-date-picker>
            </el-form-item>
        </el-form>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false,onSubmit()">确 定</el-button>
        </span>
    </el-dialog>
    <!--编辑房屋-->
    <el-dialog
            title="编辑公告"
            :visible.sync="dialogVisible1"
            width="30%"
            :before-close="handleClose1">

        <el-form ref="cmsContent" :model="cmsContent" label-width="80px">
            公告类型 &nbsp;&nbsp;&nbsp;&nbsp;<el-select v-model="cmsContent.typeId" placeholder="请选择">
                <el-option
                  v-for="item in types"
                  :key="item.typeId"
                  :label="item.typeName"
                  :value="item.typeId">
                </el-option>
            </el-select>

            <br>
            <el-form-item label="公告标题">
                <el-input v-model="cmsContent.contentTitle"></el-input>
            </el-form-item>
            <el-form-item label="公告内容">
                <el-input v-model="cmsContent.contentText"></el-input>
            </el-form-item>
            <el-form-item label="创建者">
                <el-input v-model="cmsContent.createBy"></el-input>
            </el-form-item>
            <el-form-item label="创建时间">
                <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="cmsContent.createTime" type="datetime"></el-date-picker>
            </el-form-item>
        </el-form>
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible1 = false,onSubmit1()">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
    export default {
        name: "Test01",
        data() {
               return {
                    tableData: [],
                    currentPage: 1,
                    pageSizes: [2, 3, 4],
                    pageSize: 2,
                    total: 0,
                    text:'',
                    title:'',
                    types:[],
                    multipleSelection: [],
                    dialogVisible: false,
                    dialogVisible1: false,
                    cmsContent: {
                        contentId: '',
                        typeId: '',
                        contentTitle: '',
                        contentText: '',
                        createBy:'',
                        createTime:''
                    }
                      }
              },
        methods: {
                  findtype(){
                          this.$http({
                              method: "GET",
                              url: "http://localhost:8090/cmsContent/type",
                          }).then(resp => {

                              this.types = resp.data.data.records;
                              console.log(this.types);
                          })
                      },
                findname() {
                    if (this.title || this.text){
                        this.currentPage = 1;
                    }
                    this.$http({
                        method: "GET",
                        url: "http://localhost:8090/cmsContent/name",
                        params: {
                            text:this.text,
                            title:this.title,
                            currentPage: this.currentPage,
                            pageSize: this.pageSize}
                    }).then(resp => {
                        this.tableData = resp.data.data.list
                        this.total = resp.data.data.total;
                    })
                },
                onSubmit() {
                    this.$http({
                        method: "POST",
                        url: "http://localhost:8090/cmsContent",
                        data: this.cmsContent
                    }).then(resp => {
                        this.cmsContent={ contentId: '',
                        typeId: '',
                        contentTitle: '',
                        contentText: '',
                        createBy:'',
                        createTime:''};
                        this.findall(this.currentPage, this.pageSize);
                    })
                },
                onSubmit1() {
                    this.$http({
                        method: "PUT",
                        url: "http://localhost:8090/cmsContent",
                        data: this.cmsContent
                    }).then(resp => {
                        this.cmsContent={ contentId: '',
                        typeId: '',
                        contentTitle: '',
                        contentText: '',
                        createBy:'',
                        createTime:''};
                        this.findall(this.currentPage, this.pageSize);
                    })
                },
                handleClose(done) {
                    this.$confirm('确认关闭？')
                        .then(_ => {
                            done();
                        })
                        .catch(_ => {});
                },
                handleClose1(done) {
                    this.$confirm('确认关闭？')
                        .then(_ => {
                            done();
                        })
                        .catch(_ => {});
                },
                deleteAll() {
                    let a = this.currentPage;
                    let b = this.pageSize;
                    let ids = [];
                    console.log(this.multipleSelection)
                    for (let i = 0; i < this.multipleSelection.length; i++) {
                        let j = this.multipleSelection[i].contentId;
                        ids.push(j);
                    }
                    ;
                    console.log(ids);
                    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$http({
                            method: "DELETE",
                            url: "http://localhost:8090/cmsContent",
                            data: ids
                        }).then(resp => {
                            if (a > ((this.total-1) / b)&&((this.total-1) % b)==0) {
                                this.findall(a - 1, b);
                                console.log(this.total)
                                console.log(this.total / b)
                                console.log(a);
                                console.log(b);
                            } else {
                                this.findall(a, b);
                            }

                            if (resp.data.code == 1) {
                                //2. 信息提示
                                this.$message({
                                    message: "" + resp.data.msg,
                                    type: 'success'
                                });
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });

                },
                //多选矿数组赋值
                handleSelectionChange(val) {
                    this.multipleSelection = val;
                },
                findById(id) {
                    this.$http({
                        type: "GET",
                        url: `http://localhost:8090/cmsContent/${id}`
                    }).then(resp => {
                        console.log(resp);
                        console.log(resp.data);
                        this.cmsContent = resp.data;
                    })
                },
                //编辑的方法
                handleEdit(index, row) {
                    let id = row.contentId;
                    this.findById(id);
                },
                //删除的方法
                handleDelete(index, row) {
                    let id = row.contentId;
                    let a = this.currentPage;
                    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$http({
                            method: "DELETE",
                            url: `http://localhost:8090/cmsContent/${id}`
                        }).then(resp => {
                            if (a > ((this.total-1) / this.pageSize)&&(((this.total-1) % this.pageSize)==0)) {
                                console.log(this.total);
                                this.findall(a - 1, this.pageSize);
                            } else {
                                this.findall(a, this.pageSize);
                            }

                        })
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },
                // 页面大小的触发函数
                handleSizeChange(val) {

                    //拿到当前的页面大小
                    this.pageSize = val;
                    //重新加载 数据
                    this.findall(this.currentPage, this.pageSize);
                },
                //当前页面变化触发的函数
                handleCurrentChange(val) {

                    this.currentPage = val;
                    // 当前第几页发生了变化  重新加载数据
                    this.findall(this.currentPage, this.pageSize);
                },
                findall(currentPage, pageSize) {
                    this.$http({
                        method: "GET",
                        url: "http://localhost:8090/cmsContent",
                        params: {
                            currentPage: currentPage,
                            pageSize: pageSize
                        }
                    }).then(resp => {
                        console.log(resp);

                        this.tableData = resp.data.data.records;
                        this.total = resp.data.data.total;
                    })

                }
           },
              created() {
                        this.findall(1, 2);
                        this.findtype();
                        }
    }
</script>

<style scoped>

</style>
